<template>
  <div class="height-full">
    <listLayoutVue>
      <template #title>指令审核</template>
      <template #operation>
        <Tooltip
          v-permission="'instruct/needAudit/list/audit'"
          content="请选择数据"
          :disabled="Boolean(selection.length)"
          placement="top"
          theme="light"
        >
          <Button type="primary" @click="handleBatchAudit">批量审核</Button>
        </Tooltip>
      </template>

      <template #form>
        <Form class="custom-ivu-form" inline :label-width="80" @submit.native.prevent="handleFormSubmit">
          <FormItem label="指令来源">
            <Select
              v-model="formData.source"
              class="form-item--width"
              element-id="select2"
              clearable
              @on-change="handleFormSubmit"
            >
              <Option v-for="(nt, i) of directiveSource" :key="i" :value="nt.key">{{ nt.value }}</Option>
            </Select>
          </FormItem>

          <FormItem label="关键词">
            <Input
              v-model="formData.keyword"
              :label-width="60"
              placeholder="请输入"
              class="form-item--width"
              size="large"
              clearable
            ></Input>
          </FormItem>

          <FormItem label="指令类型">
            <Select
              v-model="formData.type"
              class="form-item--width"
              element-id="select2"
              clearable
              @on-change="handleFormSubmit"
            >
              <Option v-for="(nt, i) of directiveType" :key="i" :value="nt.key">{{ nt.value }}</Option>
            </Select>
          </FormItem>

          <FormItem label="下发时间" class="width-auto" style="min-width: 30%">
            <TimeRange
              v-model="formData.timeType"
              @on-time-type-change="handleTimeTypeChange"
              @on-date-range-change="handleTimeRange"
            />
          </FormItem>

          <FormItem label="指令状态">
            <Select
              v-model="formData.state"
              class="form-item--width"
              clearable
              @on-change="handleFormSubmit"
            >
              <Option v-for="(nt, i) of directiveStates" :key="i" :value="nt.key">{{ nt.value }}</Option>
            </Select>
          </FormItem>

          <Button class="btn-search" type="primary" html-type="submit">查询</Button>
        </Form>
      </template>

      <template #table>
        <div class="list-caption f16">待审核指令列表</div>
        <CommonTablePage
          :loading="tableLoading"
          :current="formData.pageNo"
          :columns="columns"
          :tableData="tableData"
          :total="pagination.total"
          @on-selection-change="handleTableSelect"
          @on-change="handlePageChange"
          @on-page-size-change="handlePageSizeChange"
        ></CommonTablePage>
      </template>
    </listLayoutVue>

    <ModalConfrim :visible.sync="visible.audit" title="审核" @on-ok="modalAuditOk" @on-no="modalAuditCancel">
      <p class="text-center f14">是否通过审核？</p>
    </ModalConfrim>

    <ModalConfrim :visible.sync="visible.abort" title="终止" :show-footer="false" @on-ok="modalAbortOk">
      <p class="text-center f14">是否终止？</p>
    </ModalConfrim>
  </div>
</template>

<script>
// components
import listLayoutVue from '@/components/listLayout/listLayout.vue'
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
import ModalConfrim from '@/components/common/ModalConfrim/ModalConfrim'
import TimeRange from '@/components/customFrom/TimeRange'
//util
import { createCommonPagination } from '@/utils/service.js'
import { createForm } from './../service'
import { createColumns } from './service'
// request
import {
  getPendingReviewDirectiveList,
  commandAudit_first,
  commandAbort,
  getStateList,
} from '@/api/manageEnd/propagandizeDirective/pendingReviewDirective.js'
// vuex
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('manageEnd')

export default {
  name: 'PendingReviewDirective',

  components: { listLayoutVue, CommonTablePage, ModalConfrim, TimeRange },

  data() {
    return {
      formData: createForm(''),
      directiveStates: [],

      tableLoading: false,
      columns: createColumns(this),
      tableData: [],
      selection: [],
      currentAuditItems: [],
      currentAbortItems: [],

      pagination: createCommonPagination(),

      visible: {
        audit: false,
        abort: false,
      },
    }
  },

  computed: {
    directiveSource() {
      return this.$store.getters['manageEnd/directiveSource']
    },
    directiveType() {
      return this.$store.getters['manageEnd/directiveType']
    },
    disabled_batchAudit() {
      return !this.selection.length || this.selection.some((it) => !it.canFirstAudit)
    },
  },

  methods: {
    ...mapActions(['getSources', 'getDirectiveTypes']),

    handleBatchAudit() {
      if (!this.selection.length) return
      // console.log('handleBatchAudit', this.selection)
      this.currentAuditItems = this.selection
      this.visible.audit = true
    },

    handleTimeRange(date) {
      this.formData.startTime = date[0]
      this.formData.endTime = date[1]
      this.handleFormSubmit()
    },

    handleTimeTypeChange(v) {
      if (v === '自定义') {
      } else {
        this.formData.startTime = ''
        this.formData.endTime = ''
        this.handleFormSubmit()
      }
    },

    handleFormSubmit(no_reset) {
      if (no_reset !== true) {
        this.formData.pageNo = 1
      }
      this.getPendingReviewDirectiveList({ ...this.formData })
    },

    handleTableSelect(selection) {
      this.selection = selection
    },

    handleAduit(row) {
      // console.log(row)
      this.currentAuditItems = [row]
      this.visible.audit = true
    },

    handleAbort(row) {
      // console.log(row)
      this.currentAbortItems = [row]
      this.visible.abort = true
      // this.commandAbort(row.id)
    },

    handlePageChange(page) {
      this.formData.pageNo = page
      this.handleFormSubmit(true)
    },
    handlePageSizeChange(pageSize) {
      this.formData.pageSize = pageSize
      this.handleFormSubmit(true)
    },

    modalAuditOk() {
      const ids = this.currentAuditItems.map((it) => it.id).join()
      // console.log('modalAuditOk', ids)
      this.commandAudit_first({ ids, message: '', pass: true })
    },

    modalAuditCancel() {
      const ids = this.currentAuditItems.map((it) => it.id).join()
      // console.log('modalAuditCancel', ids)
      this.commandAudit_first({ ids, message: '', pass: false })
    },

    modalAbortOk() {
      // console.log('modalAbortOk')
      this.commandAbort(this.currentAbortItems.map((it) => it.id).join())
    },

    async getPendingReviewDirectiveList(params) {
      this.tableLoading = true
      const res = await getPendingReviewDirectiveList(params)
      // console.log('getPendingReviewDirectiveList', res)
      const data = res.data.data || {}
      this.tableData = Object.freeze(data.data || [])
      this.pagination.total = data.count || 0
      this.tableLoading = false
    },

    async commandAudit_first(params) {
      const res = await commandAudit_first(params)
      const status = res.data.status
      if (status === 0) {
        this.$Message.success('操作成功')
        this.handleFormSubmit()
      } else {
        this.$Message.error(res.data.message || '操作失败，请稍后再试')
      }
    },

    async commandAbort(id) {
      const res = await commandAbort(id)
      const status = res.data.status
      if (status === 0) {
        this.$Message.success('操作成功')
        this.handleFormSubmit()
      } else {
        this.$Message.error(res.data.message || '操作失败，请稍后再试')
      }
    },

    // 获取状态列表
    async getStateList() {
      const res = await getStateList()
      this.directiveStates = res.data.data || []
    },
  },

  mounted() {
    this.handleFormSubmit()

    this.getSources()
    this.getStateList()
    this.getDirectiveTypes()
  },
}
</script>

<style lang="less" scoped></style>
